<template>
    <div class="con">

        <img src="../assets/images/logo.png" alt="" class="logo" onclick="return false">
        <div class="header">
            <img src="../assets/images/giftwood.png" alt="" onclick="return false">
            <img :src="siteImageUrl+title_img" alt="" class="shopTitle" onclick="return false">
        </div>
        <div class="fares" v-for="item in data">
            <router-link :to="'/fareDetail/'+item.id">
                <img src="../assets/images/fare_wood.png" alt="" class="wood" onclick="return false">
                <img :src="siteImageUrl+item.thumb" alt="" class="fare" >
            </router-link>
        </div>
    
       
       
       
    </div>
</template>

<script>
export default {
    name: "fare",
    data() {
        return {
            data: [],
            title_img:''
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_fare";
    },
  mounted: function() {
        var qs=require("qs")
        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/ticket_list`,
            data: qs.stringify({
                        member_id: $.cookie("osc_member_id"),
                        token: $.cookie("osc_member_token"),
                        store_id: this.$route.params.id
    
                    })
        })
        .then(response => {
            if (response.data.status == 1) {
                this.data=response.data.data;
                         
            } else {
                alert("请求失败："+response.data.msg);
            }
        })
        .catch(function(error) {
            console.log(error);
        });

        this.title_img=localStorage.getItem('title_img');
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
 
  text-align: center;
}
.con img {
  width: 100%;
}
.con .logo{
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,30%);

}
.header{
    position: relative;
}
.con .shopTitle {
  position: absolute;
  top: 50.5%;
  left: 13%;
  width: 72%;
}
.con .wood{
    left: 0%;
    margin-top: -4%;
}
.con .fares{
    position: relative;
}
.con .fare{
    width: 80%;
    position: absolute;
    left: 8%;
    top:2%;
}

</style>
